<template>
  <div class="container_box">
    <Breadcrumb :items="['权限管理', '部门列表']" />
    <a-card title="部门列表">
      <!-- 搜索 -->
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <!-- <a-input
            :style="{ width: '320px' }"
            v-model="formModel.search"
            @change="fetchData"
            placeholder="请输入部门"
          /> -->
        </a-col>
        <a-col class="flex_end" :span="12">
          <a-button type="primary" @click="handleCreate"> 新建 </a-button>
          <a-tooltip content="刷新">
            <div class="action_icon" @click="search"
              ><icon-refresh size="18"
            /></div>
          </a-tooltip>
        </a-col>
      </a-row>
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data="renderData"
        default-expand-all-rows
        row-key="id"
        :loading="loading"
        :pagination="false"
      >
        <template #operations="{ record }">
          <a-button type="text" @click="handleEdit(record)">编辑</a-button>
          <a-button
            type="text"
            @click="
              addChildren = true;
              handleCreate(record);
            "
            >新建子部门</a-button
          >
          <a-button status="danger" type="text" @click="handleDel(record)"
            >删除</a-button
          >
        </template>
      </a-table>
    </a-card>
    <createModal ref="createRef" @submitFrom="submitCreateFrom" />
    <editModal ref="editRef" @submitFrom="submitEditFrom" />
    <DeleteModal ref="delRef" @submitDel="submitDel" />
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, watch, nextTick, onMounted } from 'vue';
import useLoading from '@/hooks/loading';
import { Message } from '@arco-design/web-vue';
import { getDeptList, createDept, updateDept, deleteDept } from '@/api/list';
import editModal from './components/editModal.vue';
import createModal from './components/createModal.vue';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { login } from '@/api/user';
const generateFormModel = () => {
  return {
    name: '',
    search: '',
  };
};
const { loading, setLoading } = useLoading(false);
const addChildren = ref(false);
const columns = reactive([
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: '部门负责人',
    dataIndex: 'owner',
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
  },
  {
    title: '描述',
    dataIndex: 'description',
  },
  {
    title: '操作',
    width: 200,
    slotName: 'operations',
  },
]);
const renderData = ref([]);
const formModel = ref(generateFormModel());
onMounted(() => {
  fetchData();
});
// 获取list
const fetchData = async () => {
  setLoading(true);
  try {
    const { data } = await getDeptList(formModel.value);
    renderData.value = data;
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};
// 刷新
const search = () => {
  generateFormModel();
  fetchData();
};
// 分页
const onPageChange = (current: number) => {
  formModel.value.current = current;
  fetchData();
};
// 创建
const createRef = ref<any>(null);
const handleCreate = (val: any) => {
  createRef.value.handleClick(val, addChildren.value);
};
// 提交创建
const submitCreateFrom = async (obj: any) => {
  try {
    await createDept(obj);
    Message.success('新增成功');
    fetchData();
  } finally {
    createRef.value.visible = false;
  }
};
// 编辑
const editRef = ref<any>(null);
const handleEdit = (val: any) => {
  editRef.value.handleClick(val);
};
// 提交编辑
const submitEditFrom = async (obj: any, id: any) => {
  try {
    await updateDept(obj, id);
    Message.success('编辑成功');
    fetchData();
  } finally {
    editRef.value.visible = false;
  }
};
// 删除
const delRef = ref<any>(null);
const handleDel = (val: any) => {
  delRef.value.handleDelClick(val);
};
const submitDel = async (id: any) => {
  try {
    await deleteDept(id);
    Message.success('删除成功');
    fetchData();
  } finally {
    delRef.value.visible = false;
  }
};
</script>

<script lang="ts">
export default {
  name: 'SearchTable',
};
</script>

<style scoped lang="less">
.container_box {
  padding: 0 20px 20px 20px;
}
.action_icon {
  margin-left: 12px;
  cursor: pointer;
}
:deep(.arco-btn-text, .arco-btn-text[type='button']) {
  padding: 0;
  margin-right: 8px;
  &:last-child {
    margin-right: 0;
  }
}
:deep(.arco-table) {
  overflow: auto;
  height: calc(100vh - 305px);
}
</style>
